// sidebar
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951

$menuBg: transparent;
$menuHover: transparent;

$collapseMenuBg: #304156;
$collapseMenuHover: #263445;
$collapseSubMenuBg: #1f2d3d;
$collapseSubMenuHover: #001528;

$subMenuBg: #fff;
$subMenuHover: #f2f2f2;

$sideBarWidth: 200px;

body[lang='zh_CN'] {
	--width-sidebar: 220px;
}
body[lang='en_US'] {
	--width-sidebar: 360px;
}
body[lang='vi_VN'] {
	--width-sidebar: 380px;
}
body[lang='th_TH'] {
	--width-sidebar: 380px;
}

$tableHighlightCurrentRow: #e6e3e3 !important;
$tableHoverCurrentRow: #e7e7e7 !important;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
	menuText: $menuText;
	menuActiveText: $menuActiveText;
	subMenuActiveText: $subMenuActiveText;
	menuBg: $menuBg;
	menuHover: $menuHover;
	subMenuBg: $subMenuBg;
	subMenuHover: $subMenuHover;
	sideBarWidth: $sideBarWidth;
	tableHighlightCurrentRow: $tableHighlightCurrentRow;
	tableHoverCurrentRow: $tableHoverCurrentRow;
}

// base color
$blue: #324157;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;
$black: #000000;
$white: #ffffff;
$colors: (
	black: $black,
	white: $white,
	menuText: $menuText,
	menuActiveText: $menuActiveText,
	subMenuActiveText: $subMenuActiveText,
	menuBg: $menuBg,
	menuHover: $menuHover,
	subMenuBg: $subMenuBg,
	subMenuHover: $subMenuHover,
	blue1: #00ffff,
	yellow1: #ffff80,
	green1: #2fe06c,
	red1: #ec808d,
	red2: #da5158
);
$classColor: (
	bc: background-color,
	tc: color,
	bdc: border-color
);
$border-color: #434343;
$mainBG: #f4f5f9;
